<template>
	<!-- 已经绑定的商机 -->
	<view class="page">
		<!-- search -->
		<view style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
			<view class="" @click="popBack()">
				<text class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></text>
				<text style="font-size: 16px;">返回</text>
			</view>
		</view>
		<!-- base info -->
		<div style="padding: 12px;background-color: #FFFFFF;">
			<!-- row -->
			<div style="display: flex;">
				<image :src="require('../../static/home/home01.png')" style="width: 44px;height: 44px;" mode=""></image>
				<div style="flex: 1;padding-left: 10px;">
					<div style="display: flex;justify-content: space-between;align-items: auto;">
						<div style="font-size: 14px;font-weight: bold;">哈哈(州级了)</div>
						<div
							style="padding: 5px 12px;background-color: #007AFF;color: #FFFFFF;font-size: 12px;border-radius: 15px;">
							意向强烈</div>
					</div>
					<div style="display: flex;">
						<div
							style="padding: 2px 12px;background-color: #007AFF;color: #FFFFFF;font-size: 12px;border-radius: 4px;margin-right: 5px;">
							已绑定</div>
						<div
							style="padding: 2px 12px;background-color: #FFFFFF;color: #FF0000;font-size: 12px;border-radius: 15px;border: 1px solid #FF0000;margin-right: 5px;">
							校园大使</div>
						<div style="padding: 2px 12px;color: #007AFF;font-size: 12px;border-radius: 15px;">男</div>
					</div>
				</div>
			</div>
			<!-- row2 -->
			<div style="display: flex;margin-top: 12px;">
				<div
					style="padding: 2px 12px;background-color: #FFFFFF;color: #007AFF;font-size: 12px;border-radius: 4px;border: 1px solid #007AFF;margin-right: 5px;">
					修改</div>
				<div
				@click="loadAddFlowPage"
					style="padding: 2px 12px;background-color: #FFFFFF;color: #007AFF;font-size: 12px;border-radius: 4px;border: 1px solid #007AFF;margin-right: 5px;">
					填写跟进记录</div>
				<div
					style="padding: 2px 12px;background-color: #007AFF;color: #FFFFFF;font-size: 12px;border-radius: 4px;border: 1px solid #007AFF;margin-right: 5px;">
					签单</div>
			</div>

			<!-- row3 -->
			<div style="display: flex;margin-top: 12px;justify-content: space-between;">
				<div style="font-size:12px;color:#999999;">上次跟进时间:2020年12月12日</div>
				<div style="font-size:12px;color:#999999;">距离下次</div>
			</div>
		</div>
		<!-- 课程意向 & 基本资料 & tab-->
		<div style="flex: 1;overflow-y: auto;display: flex;flex-direction: column;padding-bottom: 20px;">
			<!-- item -->
			<expand-data-cell title="意向课程" />
			<expand-data-cell title="基本资料" />
			<!-- tabbar -->
			<div>
				<div
					style="padding: 0 12px;display: flex;	white-space: nowrap;overflow: hidden;background-color: #FFFFFF;">
					<view @click="tabClick(idx)" style="color: #333333;padding: 5px 0;text-align: center;flex: 1;"
						v-for="(obj,idx) in tabs" :key="idx">
						<text :style="{'font-size': '14px',
					'font-weight': idx == tabindex?'bold':'normal',
					'color':idx == tabindex?'#007AFF':'#222222'}">{{obj}}</text>
						<view style="height: 2px;margin-top: 5px;background-color: #007AFF;" v-if="idx == tabindex">
						</view>
					</view>
				</div>
			</div>
			
			<!-- body -->
			<div>
				<detailinfo v-if="tabindex == 0"/>
				<chatrecourd v-if="tabindex == 1"/>
			</div>
		</div>
	</view>
</template>

<script>
	import detailinfo from "./personinfo-hasbindbusiness-detailinfo"
	import chatrecourd from "./personinfo-hasbindbusiness-chatrecourd"
	export default {
		components: {
			detailinfo,
			chatrecourd
		},
		data() {
			return {
				tabindex: 0,
				tabs: ['详细资料', '沟通记录']
			}
		},
		methods: {
			tabClick(idx) {
				this.tabindex = idx;
			},
			popBack(){
				uni.navigateBack({
					
				})
			},
			loadAddFlowPage(){
				uni.navigateTo({
					url:"./personinfo-add-flowup"
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		flex: 1;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
	}
</style>
